<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>
<style>

</style>

<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <h3>{{world}}</h3>
        <h4 :data-id="id" :data-word='world'></h4>
        <p>
            <!-- v-model表示的是双向影响的数据 -->
            <input type="text" v-model='world'>
        </p>
        <!-- v-html可以识别标签 -->
        <!-- v-text只能识别文本 -->
        <p v-html='tag'></p>
        <img v-if='flag' :src="imgSrc" width="100px" height="100px" alt="">
        <button @click='flag=!flag'>点击切换{{!flag?'显示':'隐藏'}}</button>
        <div v-show="flag">
            v-show 只是样式CSS的切换
            <!-- v-show 是自身样式的切换 -->
        </div>
        <div>
            <h2>计算属性 对于任何复杂逻辑,你都应当使用计算属性</h2>
            <h2>侦听属性 watch</h2>
            <div>
                <p>{{massage}}</p>
                <!-- 这里倒序排列 -->
                <p>{{massage.split('').reverse().join("")}}</p>
                <!-- <p>{{reverseMsg  }}</p> -->
                <p>
                    <input type="text" v-model="massage">
                </p>
            </div>
            <div>
                <p>
                    computed VS methods
                </p>
                <p>
                    data=={{text}}
                </p>
                <p>
                    computed == {{reserseText }}
                </p>
                <p>
                    methods=={{getText()}}
                </p>
                <p>
                    <input type="text" v-model="text">
                </p>
            </div>
            <div>
                <h2> watch </h2>
                <p>姓: <input type="text" v-model="firstName"></p>
                <p>名: <input type="text" v-model="lastName"></p>
                <p>fullName: {{firstName + ' - ' + lastName}}</p>
                <p>fullName: {{fullName}}</p>
                <p>fuName : {{fuName}} </p>
                <p>myName : {{myName}} </p>
            </div>
        </div>
    </div>
    </div>




    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: "模板语法 双大括号语法",
                world: 'wh2110-daydayup',
                tag: "<i>Are you ok?</li>",
                id: 2110,
                imgSrc: 'http://47.104.209.44/base/imgs/1.jpg',
                flag: true,
                massage: 'wh2110 - learn More About Vue',
                text: "wh2110 - Learn More About Vue ",
                firstName: "JOBS",
                lastName: "ZuoZuomu",
                fullName: "JOBS - ZuoZuomu",
                smallNum: 500,
            },
            watch: {  // 侦听器   监听一个数据改变 执行对应的回调函数 
                text(v) {
                    console.log("你修改了 text -- " + v)
                },
                firstName(v) {
                    this.fullName = v + " & " + this.lastName;
                },
                lastName(v) {
                    this.fullName = this.firstName + " & " + v;
                }
            },
            computed: {  // 计算属性  
                bigNum: {
                    get() {
                        return this.smallNum + 3000
                    },
                    set(v) {
                        this.smallNum = v
                    }
                },
                myName: {
                    // getter 设置 计算属性的值  取值
                    // 默认 
                    get() {
                        return this.firstName + " % " + this.lastName;
                    },
                    // setter 监听计算属性的值 主动改变 
                    set(v) {
                        console.log(v)
                        var names = v.split(" % ")
                        this.firstName = names[0]
                        this.lastName = names[1]
                    }
                },
                fuName() { // get 
                    return this.firstName + " ~ " + this.lastName;
                },
                reverseMsg() {
                    return this.message.split("").reverse().join("")
                },
                reserseText() {
                    return this.text.split("").reverse().join("") + " " + new Date().getSeconds()
                }
            },
            methods: {
                getText() {
                    return this.text.split("").reverse().join("") + " " + new Date().getSeconds()
                }
            },
            mounted() {
                document.getElementsByTagName("title")[0].innerHTML = this.msg
            }
        }).$mount("#app")

        vm.$watch("firstName", v => {
            console.log(v)
        })

    </script>
</body>

</html>